import React, { memo } from 'react'


import DTopBanner from './c-cpns/top-banner'
import DHotRecommend from './c-cpns/hot-recommend'
import DNewAlbum from './c-cpns/new-album'
import DRecommendToplist from './c-cpns/recommend-toplist'
import DHotAnchor from './c-cpns/hot-anchor'
import DSettleArtist from './c-cpns/settle-artist'
import DUserLogin from './c-cpns/user-login'
import {
  RecommendWrapper,
  Content,
  RecommendLeft,
  RecommendRight
} from './style'

export default memo(function DRecommend() {

  return (
    <RecommendWrapper>
      <DTopBanner/>
      <Content className="wrap-v2">
        <RecommendLeft>
          <DHotRecommend/>
          <DNewAlbum/>
          <DRecommendToplist/>
        </RecommendLeft>
        <RecommendRight>
          <DUserLogin/>
          <DSettleArtist/>
          <DHotAnchor/>
        </RecommendRight>
      </Content>
    </RecommendWrapper>
  )
})


// 优化前的代码
// function DRecommend(props) {
//   const { getBanners, topBanners } = props
  
//   useEffect(() => {
//     getBanners()
//   }, [getBanners])

//   return (
//     <div>
//       <h2>Recommend: {topBanners.length}</h2>
//     </div>
//   )
// }

// const mapStateToProps = state => ({
//   topBanners: state.recommend.topBanners
// })
// const mapDispatchToProps = dispatch => ({
//   getBanners: () => { 
//     dispatch(getTopBannerAction())
//   }
// })

// export default connect(mapStateToProps, mapDispatchToProps)(memo(DRecommend))
